<template>
    <a-affix :offset-top="offsetTop">
        <a-card :loading="loading" :title="title">
            <a-list :data-source="data" item-layout="horizontal">
                <a-list-item slot="renderItem" slot-scope="item">
                    <a-list-item-meta>
                        <a href="https://www.antdv.com/" slot="title">{{ item.username }}</a>
                        <a-avatar
                                slot="avatar"
                                src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                        />
                    </a-list-item-meta>
                </a-list-item>
            </a-list>
        </a-card>
    </a-affix>
</template>

<script>
    import {Affix, Avatar, Card, List} from "ant-design-vue";
    import axios from "axios";

    export default {
        name: "ListCard",
        components: {
            ACard: Card,
            AList: List,
            AListItem: List.Item,
            AListItemMeta: List.Item.Meta,
            AAvatar: Avatar,
            AAffix: Affix
        },
        props: ['title', 'remoteUrl', 'offsetTop', 'source'],
        data() {
            return {
                loading: true,
                data: []
            }
        },
        mounted() {
            let vue = this;
            axios.get("/recommend/", {params: {source: 'author'}}).then(function (response) {
                vue.data = response.data;
                vue.loading = false;
            })
        }
    }
</script>

<style scoped>
    >>> .ant-card-body {
        padding: 5px;
    }
</style>0